<template>
  <div class="app-container">
    <!-- 文章详情 -->
    <el-form v-model="blog" class="blog-detail">
      <el-form-item label="标题：">
        <span class="title">{{ blog.title }}</span>
      </el-form-item>
      <el-form-item label="作者：">
        {{ blog.username }}
      </el-form-item>
      <el-form-item label="类别：">
        {{ blog.typeName }}
      </el-form-item>
      <el-form-item label="封面：">
        <img v-show="blog.cover" :src="blog.cover" class="cover">
        <!-- {{ blog.cover}} -->
      </el-form-item>
      <el-form-item label="正文：">
        <div class="content">
          <v-md-preview :text="blog.content" preview-class="vuepress-markdown-body" />
        </div>
      </el-form-item>
      <el-form-item class="btn-box">
        <el-button type="primary" @click="onSubmit">审核</el-button>
        <el-button @click="onCancel">关闭</el-button>
      </el-form-item>
    </el-form>
    <el-dialog
      title="审核"
      :visible.sync="reviewDialogVisible"
      width="40%"
      center
      destroy-on-close
    >
      <el-form :model="reviewForm">
        <el-form-item label="审核意见">
          <el-select v-model="reviewForm.status" placeholder="请选择状态">
            <el-option label="审核不通过" value="1">审核不通过</el-option>
            <el-option label="审核通过" value="2">审核通过</el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="意见回复">
          <el-input v-model="reviewForm.content" type="textarea" placeholder="请输入意见回复" :rows="2" />
        </el-form-item>
        <!-- <el-form-item>
            <el-button type="primary" @click="addReview">确定</el-button>
            <el-button @click="reviewDialogVisible=false">取消</el-button>
          </el-form-item> -->
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="addReview">确定</el-button>
        <el-button @click="reviewDialogVisible=false">取消</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import { getBlogDetail, addBlogReview } from '@/api/blog'
// import blog from '@/store/modules/blog'

export default {
  name: 'BlogDetail',
  props: {
    bid: {
      type: Number,
      default: 0
    },
    isReview: {
      type: Boolean,
      default: true
    }
  },
  data() {
    return {
      blog: {},
      reviewDialogVisible: false,
      reviewForm: {
        status: null,
        content: ''
      }
    }
  },
  created() {
    getBlogDetail(this.bid).then(res => {
      const { blog } = res.data
      console.log(res)
      this.blog = blog
    })
  },
  methods: {
    onCancel() {
      this.$emit('update:isReview', false)
    },
    onSubmit() {
      this.reviewDialogVisible = true
      this.reviewForm.blogId = this.bid
    //   const res = await addBlogReview(this.reviewForm)
    //   if (res.code === 200) {
    //     this.$message.success('操作成功')
    //     this.onCancel()
    //   } else {
    //     this.$message.error('操作失败')
    //   }
    },
    async addReview() {
      console.log(this.reviewForm)
      const res = await addBlogReview(this.reviewForm)
      if (res.code === 200) {
        this.$message.success('操作成功')
        // this.search()
        this.reviewDialogVisible = false
        this.onCancel()
      } else {
        this.$message.error('操作失败')
      }
    }
  }
}
</script>

<style lang="scss" scoped>
.app-container {
//   display: flex;
//   flex-direction: column;
//   align-items: center;
  height: 100%;
  width: 100%;
  .blog-detail {
    width: 100%;

    .title {
        font-weight: 700;
    }

    .btn-box {
        padding-left: 40px;
    }

  .cover {
    height: 200px;
    width: 360px;
    display: block;
    object-fit: cover;
  }
  .content {
    // border: 1px solid #ccc;
    padding: 10px;
    }
  }

}
</style>
